<!--  -->
<template>
<div class='active-list'>
    <div class="getback">
        <p onclick="window.history.back()">
            <img src="../../assets/zuojiantou.png" alt="">
        </p>
        <span>活动列表</span>
    </div>
    <div class="activelist">
        <div class="list" v-for="(item,index) in activeListData" :key="index">
            <div class="left">
                <img :src="item.cover.url" alt="">
            </div>
            <div class="center">
                <p class="p1 text-cut">{{item.title}}</p>
                <p class="p2 text-cut">活动地址：{{item.address}}</p>
                <p class="p2 text-cut">报名截止：{{item.activity_end_at}}</p>
                <div class="p3">
                    <b>{{item.user_count}}
                        <i>人参与</i>
                    </b>
                </div>
            </div>
            <div class="right">
                <span v-if="item.status == 'end'">活动已结束</span>
                <span :class="item.status == 'pending'?'active':''" v-else>立即报名</span>
                <img src="../../assets/4.png" alt="" v-show="item.status == 'end'">
            </div>
        </div>
    </div>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
    project:1
};
},
//监听属性 类似于data概念
computed: {
    activeListData(){
        return this.$store.state.activeListDatas
    }
},
//监控data中的数据变化
watch: {},
//方法集合
methods: {

},
beforeCreate() {}, //生命周期 - 创建之前
//生命周期 - 创建完成（可以访问当前this实例）
created() {
console.log(this.$store.state.activeListDatas);
},
beforeMount() {}, //生命周期 - 挂载之前
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
    this.$store.dispatch('activeListData',{project:this.project})
},
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
.active-list{
    .getback{
        height: 4.4rem;
        line-height: 4.4rem;
        text-align: center;
        font-size: 1.6rem;
        font-weight: 700;
        background: #fff;
        position: relative;
        img{
            width: 1.8rem;
            height: 1.8rem;
            position: absolute;
            top: 1.2rem;
            left: 1.2rem;
        }
    }
    .text-cut{
        display: inline-block;
        white-space: nowrap;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .activelist{
        padding: 1.5rem;
        .list{
            background: #fff;
            border-radius: .5rem;
            margin-bottom: 1rem;
            padding: 1.5rem;
            display: flex;
            .left{
                img{
                    width: 9.5rem;
                    height: 9.5rem;
                    object-fit: cover;
                    border-radius: .5rem;
                }
            }
            .center{
                flex: 1;
                width: 0;
                padding: 0 1rem;
                .p1{
                    font-size: 1.5rem;
                    font-weight: 700;
                    margin-bottom: .8rem;
                }
                .p2{
                    color: #6e7383;
                    line-height: 1.8rem;
                }
                 b{
                    font-style: normal;
                    line-height: 2rem;
                    color: #ff6238;
                    i{
                        color: #666;
                        font-weight: 400;
                        font-style: normal;
                    }
                }
            }
            .right{
                position: relative;
                span{
                    display: inline-block;
                    padding: 0 1rem;
                    height: 2.2rem;
                    background: #bdc1c5;
                    border-radius: 1rem;
                    font-size: 1.2rem;
                    font-weight: 500;
                    color: #fff;
                    text-align: center;
                    line-height: 2.2rem;
                    margin-top: 6.8rem;
                }
                .active{
                    background: linear-gradient(90deg,#ff4a00,#ff8d25);
                }
                img{
                    vertical-align: bottom;
                    width: 6.7rem;
                    height: 5.3rem;
                    position: absolute;
                    right: 0;
                    top: .5rem;
                }
            }
        }
    }
}
</style>